﻿
<nav class="navbar-default navbar-static-side" role="navigation">
    <div class="sidebar-collapse">
        <ul class="nav metismenu" id="side-menu">
            <li class="nav-header">
                <div class="dropdown profile-element"> <span>
                        <img alt="image" class="img-circle" src="/Content/noke/img/profile_small.jpg" />
                            </span>
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">Genshui Yang</strong>
                            </span> <span class="text-muted text-xs block">Art Programmer<b class="caret"></b></span> </span> </a>
                    <ul class="dropdown-menu animated fadeInRight m-t-xs">
                        <li><a href="profile.html">个人中心</a></li>
                        <li><a href="contacts.html">通讯录</a></li>
                        <li><a href="mailbox.html">设置</a></li>
                        <li class="divider"></li>
                        <li><a href="login.html">Logout</a></li>
                    </ul>
                </div>
                <div class="logo-element">
                    NE+
                </div>
            </li>

        </ul>
    </div>
</nav>


    <script>
        var fformmenu = function () {

            this.init = function(){

                var thisobj = this, url = '/Home/GetApiDocList/?type=1001&level=2';
                $.getJSON(url, function (res) {
                    if (res) {
                        thisobj.menus = convertToTree(res);
                        var mhtml = bind(thisobj.menus, 1, thisobj.menuno);
                        $('#side-menu').append(mhtml);
                        $('#side-menu').metisMenu();

                    } else {
                        console.log('Get:' + res.Msg);
                    }
                }, 'json');


            };

            var bind = function(menus, level, menuno){
                var mhtml = '', len = menus.length;

                for(var i = 0; i < len; i++){
                    var m = menus[i], arrow = '', chtml = '', active = '', expend = '';

                    var icon = (m.icon) ? '<i class="fa fa-' + m.icon + '"></i>' : '';

                    if(menuno.toString().substr(0, (level * 4)) == m.no.toString()){
                        active = ' class="active"';
                        expend = ' in';
                    }
                    if(m.childs && m.childs.length > 0) {
                        arrow = '<span class="fa arrow"></span>';
                        chtml = '<ul class="nav nav-second-level collapse' + expend + '">' + bind(m.childs, (level + 1), menuno) + '</ul>';
                    }
                    if(level == 1)
                        mhtml += '<li' + active + '><a href="' + m.url + '">' + icon + '<span class="nav-label">' + m.label + '</span>' + arrow + '</a>' + chtml + '</li>';
                    else
                        mhtml += '<li' + active + '><a href="' + m.url + '">' + icon + m.label + arrow + '</a>' + chtml + '</li>';
                }
                return mhtml;
            }

            this.menuno = @ViewBag.MenuNo

            this.menus = [];
            this.menus.push({ no: 1001, label: '桌面', icon: 'link', url: '/', childs: [] });
                      
            this.menus.push({
                no: 1002,
                label: '工具',
                icon: 'wrench',
                url: '#',
                childs: [
                    { no: 10020001, label: '代码生成器-Model', url: '/CodeGenerator' }
                    , { no: 10020002, label: '数据库表结构', url: '/Doc' }
                    , { no: 10020003, label: '基础-树型数据', url: '/Home/TreeData' }
                    , { no: 10020004, label: 'API接口文档', url: '/Home/ApiDoc' }
                ]
            });
            this.menus.push({
                no:1003, 
                label: 'UI',
                icon: 'gears',
                url: '#', 
                childs: [ { no: 10030001, label: 'Grid', url: '/UI/Grid' }
                    , { no: 10030002, label: 'JQuery Tree', url: '/UI/JQTree' }
                    , { no: 10030003, label: 'Editor', url: '/UI/Editor' }
                ]
            });
            this.menus.push({ no: 1004, label: 'API接口文档', icon: 'code', url: '/doc/DocModify', childs: [] });

            // ****转换成树形结构 【BEGIN】***********************************************
            var convertToTree = function (treeData) {
                var root = { "no": "0", "parentno": "0", "label": "Root", childs: [] }, len = treeData.length, temp = {}, key = '', list = [], item = null, parent = null;
                for (var level = 0; level < len; level++) {
                    list = treeData[level];
                    for (var i = 0; i < list.length; i++) {
                        item = list[i], item.icon = item.v1, item.url = item.v2;
                        parent = (level == 0) ? root : getParent(temp, item.parentno, root);
                        if (!parent || (parent.id == 0 && level != 0)) {
                            continue;
                        }
                        key = item.no;
                        temp[key] = (level == 0 ? '' : (temp[item.parentno] + '-')) + parent.childs.length;
                        item.childs = [];
                        parent.childs.push(item);
                    }
                }
                return root.childs;
            }
            var getParent = function (temp, pid, root) {
                if (temp[pid]) {
                    var ptemp = temp[pid].toString().split('-');
                    var parent = root;
                    $(ptemp).each(function (i, index) {
                        parent = parent.childs[parseInt(index)];
                    })
                    return parent;
                }
                return null;
            }
            // ****************** 【END】********************************

            this.init();
        }
    </script>